<template>
  <el-card class="user-info-card" shadow="hover" style="margin-bottom: 30px;">
    <el-descriptions border>
      <el-descriptions-item label="Name">{{ adminStore.adminInfo.name }}</el-descriptions-item>
      <el-descriptions-item label="Telephone">{{ adminStore.adminInfo.phone }}</el-descriptions-item>
      <el-descriptions-item label="Account">{{ adminStore.adminInfo.account }}</el-descriptions-item>
      <el-descriptions-item label="Sex">{{ adminStore.adminInfo.sex }}</el-descriptions-item>
      <el-descriptions-item label="Create Time">{{ adminStore.adminInfo.createTime }}</el-descriptions-item>
    </el-descriptions>
  </el-card>

  <!-- 用户概览数据 -->
  <el-row :gutter="20" style="margin-bottom: 50px;">
    <el-col :span="24">
      <h3 class="section-title">营业数据</h3>
    </el-col>
    <el-col :span="6">
      <el-statistic title="营业额" :value="businessData.turnover" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="订单完成率" :value="businessData.orderCompletionRate" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="今日新增" :value="businessData.newUsers" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="全部用户" :value="businessData.allUsers" />
    </el-col>
  </el-row>

  <!-- 订单概览数据 -->
  <el-row :gutter="20" style="margin-bottom: 50px;">
  <el-col :span="5">
    <el-statistic title="日期" :value="orderOverView.date" />
  </el-col>
  <el-col :span="2">
    <el-statistic title="未支付" :value="orderOverView.unpaidOrders" />
  </el-col>
  <el-col :span="2">
    <el-statistic title="已支付" :value="orderOverView.paidOrders" />
  </el-col>
  <el-col :span="2">
    <el-statistic title="已发货" :value="orderOverView.shippedOrders" />
  </el-col>
  <el-col :span="2">
    <el-statistic title="运输中" :value="orderOverView.inTransitOrders" />
  </el-col>
  <el-col :span="2">
    <el-statistic title="已收货" :value="orderOverView.receivedOrders" />
  </el-col>
  <el-col :span="2">
    <el-statistic title="已完成" :value="orderOverView.completedOrders" />
  </el-col>
  <el-col :span="2">
    <el-statistic title="已取消" :value="orderOverView.closeOrders" />
  </el-col>
  <el-col :span="2">
    <el-statistic title="取消中" :value="orderOverView.cancelingOrders" />
  </el-col>
</el-row>

  <UserAndOrderStats />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useAdminStore } from "@/stores/adminStore";
import { getBusinessDataAPI, getOrderOverViewAPI } from "@/apis/workspace.js";
import UserAndOrderStats from "./components/UserAndOrderStats.vue";


const adminStore = useAdminStore();
const businessData = ref({});
const orderOverView = ref({});

const getBusinessData = async () => {
  const res = await getBusinessDataAPI();
  businessData.value = res.data;
}

const getOrderOverView = async () => {
  const res = await getOrderOverViewAPI();
  orderOverView.value = res.data;
}

onMounted(() => {
  getBusinessData();
  getOrderOverView();
});
</script>

<style scoped>
.user-info-card {
  background-color: #fff;
  border-radius: 15px;
  padding: 20px;
  color: #333;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.el-row {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.el-statistic {
  margin-bottom: 20px;
  border-radius: 10px;
  background-color: #f7f7f7;
  padding: 15px;
  text-align: center;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}

.el-statistic .el-statistic__content {
  font-size: 22px;
  color: #409EFF;
}

.el-statistic .el-statistic__label {
  font-size: 14px;
  color: #777;
}

.el-statistic:hover {
  background-color: #e9f4ff;
}

.el-descriptions-item {
  font-size: 14px;
  color: #333;
}

.el-statistic .el-statistic__title {
  font-weight: bold;
  color: #555;
}
</style>
